<template>
  <div class="page">
    <el-form :inline="true">
      <el-form-item>
        <el-button icon="el-icon-plus" @click="addNewSpec">新增</el-button>
      </el-form-item>
    </el-form>

    <el-form label-position="top">
      <el-form-item
        :label="item.attributeName"
        v-for="(item, index) in list"
        :key="item.id"
      >
        <el-card>
          <el-row>
            <el-col :span="6">
              <el-input
                v-model="item.attributeName"
                @blur="handleChangeSpecName(index)"
              ></el-input>
            </el-col>
          </el-row>
          <el-row type="flex" justify="end">
            <el-col :span="22">
              <el-checkbox-group v-model="item.checkList">
                <el-checkbox
                  :label="value.id"
                  v-for="(value, index1) in item.list"
                  :key="value.id"
                >
                  <span>{{ value.attributeValue }}</span>
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="editSpecValue(value)"
                  ></el-button>
                </el-checkbox>
              </el-checkbox-group>
            </el-col>
            <el-col :span="2">
              <el-button
                type="text"
                @click="deleteValue(index)"
                style="color: #ff0000"
                >删除规格</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-button icon="el-icon-plus" @click="addNewValue(item.id)"
                >新增</el-button
              >
            </el-col>
          </el-row>
        </el-card>
      </el-form-item>
    </el-form>

    <!-- 新增规格弹窗 -->
    <el-dialog title="新增规格" :visible.sync="addSpecDialogShow">
      <el-form :model="specForm">
        <el-form-item label="规格名称" label-width="80">
          <el-input
            v-model="specForm.attributeName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSpecDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="submitAddSpec">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增value值弹窗 -->
    <el-dialog title="新增规格值" :visible.sync="addValueDialogShow">
      <el-form :model="valueForm">
        <el-form-item label="规格值名称" label-width="80">
          <el-input
            v-model="valueForm.attributeValue"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addValueDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="submitAddValue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  listKey,
  getKey,
  delKey,
  addKey,
  updateKey,
  exportKey,
} from "@/api/ds/keyList";

import {
  listValue,
  getValue,
  delValue,
  addValue,
  updateValue,
  exportValue,
} from "@/api/ds/valueList";

export default {
  name: "Category",
  components: {},
  props: {},
  data() {
    return {
      list: [{ checkList: [] }],
      addSpecDialogShow: false,
      specForm: {
        attributeName: "",
      },

      addValueDialogShow: false,
      valueForm: {
        mode: "add",
        id: "",
        kid: "",
        attributeValue: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await listKey();
      if (res.code === 200) {
        this.list = res.rows;

        this.getValue();
      }
    },

    // 根据key id获取所有的value Id
    async getValue() {
      // let res = await listValue({kid});
      let promiseArr = this.list.map((item) => {
        return new Promise(async (resolve, reject) => {
          let res = await listValue({ kid: item.id });
          console.log(
            "%c [ res ]-154",
            "font-size:13px; background:#333333; color:#f3f3f3;",
            res
          );
          if (res.code === 200) {
            resolve(res);
          } else {
            reject();
          }
        });
      });

      let resList = await Promise.all(promiseArr);
      let arr = [];

      resList.map((data) => {
        data.rows.map((col) => {
          arr.push(col);
        });
      });

      arr.map((item) => {
        this.list.forEach((spec) => {
          if (spec.id === item.kid) {
            if (spec.list) {
              spec.list.push(item);
            } else {
              this.$set(spec, "list", []);
              this.$set(spec, "checkList", []);

              spec.list.push(item);
            }
          }
        });
      });

      console.log("list:", this.list);
    },
    // 新增规格
    addNewSpec() {
      this.addSpecDialogShow = true;
    },
    async submitAddSpec() {
      let query = { attributeName: this.specForm.attributeName, status: 1 };
      let res = await addKey(query);
      if (res.code === 200) {
        console.log(res);
        this.addSpecDialogShow = false;
        this.getData();
      }
    },

    // 新增规格值
    addNewValue(id) {
      this.addValueDialogShow = true;
      this.valueForm.kid = id;
      this.valueForm.mode = "add";
    },
    async submitAddValue() {
      if (this.valueForm.mode === "add") {
        let query = {
          kid: this.valueForm.kid,
          attributeValue: this.valueForm.attributeValue,
          status: 1,
        };
        let res = await addValue(query);
        if (res.code === 200) {
          console.log(res);
          this.addValueDialogShow = false;
          this.getData();
        }
      } else if (this.valueForm.mode === "edit") {
        let query = {
          id: this.valueForm.id,
          attributeValue: this.valueForm.attributeValue,
        };

        let res = await updateValue(query);
        if (res.code === 200) {
          this.$notify({
            type: "success",
            message: res.msg,
          });
          this.getData();
          this.addValueDialogShow = false;
        }
      }
    },

    async deleteValue(index) {
      // 二次确认

      this.$confirm("此操作将删除该规格值, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let promiseArr = this.list[index].checkList.map((value) => {
            return new Promise(async (resolve, reject) => {
              let res = await delValue(value);
              if (res.code === 200) {
                resolve(res);
              } else {
                reject();
              }
            });
          });

          let resList = await Promise.all(promiseArr);

          this.getData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    async handleChangeSpecName(index) {
      let res = await updateKey({
        id: this.list[index].id,
        attributeName: this.list[index].attributeName,
      });

      if (res.code === 200) {
        this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        this.getData();
      }
    },

    editSpecValue({ id, attributeValue }) {
      this.valueForm.id = id;
      this.valueForm.attributeValue = attributeValue;
      this.addValueDialogShow = true;
      this.valueForm.mode = "edit";
    },
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  deactivated() {},
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: calc(100vh - 84px);
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding: 20px;
}
</style>
